<template>
<div class="tabbar">
  <img class="tabbar_bg" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/tab_bg.png" mode=""/>
  <div class="tabbar-item" :class="index==2?'tabbar-item1':''"
      v-for="(item, index) in list" 
      :key="index" 
      @click="tabbarChange(item.path)"
  >
    <div  class="item-name" :class="{'tabbarActive': current == index}" v-if="item.text">{{item.text}}</div>
    <img  v-if='index!=2 && current == index' class="item-img" :src="item.icon_a"/>
    <img  v-if='index!=2 && current != index' class="item-img" :src="item.icon"/>
    <div class="item-img1" v-if='index==2' >
      <img  class="item-img item-img2" v-if='index==2' :src="item.icon" />
    </div>
  </div>
</div>
</template>

<script>
import img1 from '@/assets/img/tabbar/icon1.png'
import img2 from '@/assets/img/tabbar/icon2.png'
import img3 from '@/assets/img/tabbar/icon3.png'
import img4 from '@/assets/img/tabbar/icon4.png'
import img1_a from '@/assets/img/tabbar/icon1_a.png'
import img2_a from '@/assets/img/tabbar/icon2_a.png'
import img3_a from '@/assets/img/tabbar/icon3_a.png'
import img4_a from '@/assets/img/tabbar/icon4_a.png'
import fb from '@/assets/img/tabbar/fb.png'
export default {
  props: {
    current: {
      type: Number,
      default: 0
    }
  },
  data() {
      return {
        list: [{
              text: '首页',  
              icon: img1,  //未选中图标
              icon_a: img1_a,  //选中图片
              path: "index",
          },{
              text: '乡品',
              icon: img2,  //未选中图标
              icon_a: img2_a,  //选中图片
              path: "productHome",
          },
          {
              text: '',
              icon: fb,  //未选中图标
              icon_a: fb,  //选中图片
              path: "fb",
          },
          {
              text: '消息',
              icon: img3,  //未选中图标
              icon_a: img3_a,  //选中图片
              path: "xxList",
          },
          {
              text: '我的',
              icon: img4,  //未选中图标
              icon_a: img4_a,  //选中图片
              path: "my",
          },
        ]
      };
  },
  created() {
  
  },
  watch: {
      
  },
  methods: {
    tabbarChange(url) {
      this.$router.push({name:url})
    }
  }
};
</script>

<style lang="scss" scoped>
.tabbarActive{
  color: #EB7418 !important;
}
.tabbar_bg{
  width: 100%;
  height: 80px;
  top: -30px;
  left: 1px;
  position: absolute;
}
.tabbar{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    background-size: 100%;
    display: flex;
    justify-content: space-around;
    z-index: 1000;
    .tabbar-item{
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        margin-bottom: 5px;
        width: 19.5%;
        position: relative;
        z-index: 1;
        .item-img{
            width: 20px;
            height: 20px;
            margin-bottom: 2px;
            z-index: 1;
        }
        .item-img1{
            position: fixed;
            justify-content: center;
            width: 55px;
            height: 55px;
            z-index: 999;
            border-radius: 27.5px;
            overflow: hidden;
            transform: translateY(-5px);
        }
        .item-img2{
            position: fixed;
            width: 55px;
            height: 55px;
            z-index: 999;
        }
        .item-name{
            font-size: 11px;
            color: #333333;
            position: relative;
            z-index: 1000;
        }
    }
    .tabbar-item1{
      width: 22%;
    }
}
</style>